<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
        #main div {
            width: 38px;
            height: 38px;
            border: 1px solid #ccc;
            float: left
        }

        .head {
            background-color: red
        }

        .body {
            background-color: green
        }

        .ball {
            background-color: yellow
        }
    </style>
</head>
<body>
<div id="main" style="width:1600px">
</div>
<script type="text/javascript">
    var snake = new Array();
    var col = 40;
    var row = 20;
    var direction = "right";
    $(function () {
        var container = $("#main");
        for (var i = 0; i < row; i++) {
            for (var j = 0; j < col; j++) {
                container.append("<div id='" + i + "-" + j + "'></div>")
            }
        }
//        $("#0-1").addClass("head");
//        $("#0-0").addClass("body");
        snake[0] = "0-1";
        snake[1] = "0-0";
        drawSnake();
        createBall();
        setInterval("move()", 300);
        $(document).keydown(function (e) {
            switch (e.keyCode) {
                case 37:
                    if (direction == 'right') return;
                    direction = 'left';
                    break;
                case 38:
                    if (direction == 'down') return;
                    direction = 'up'
                    break;
                case 39:
                    if (direction == 'left') return;
                    direction = 'right'
                    break;
                case 40:
                    if (direction == 'up') return;
                    direction = 'down'
                    break;
                default:
                    return;
            }
            move();
            //下 40  右39  上38 左37
        })
    })

    function drawSnake() {
        $(".head").removeClass("head");
        $(".body").removeClass("body");
        var head = $("#" + snake[0]);
        head.addClass("head");
        for (var i = 1; i < snake.length; i++) {
            $("#" + snake[i]).addClass("body")
        }
    }

    function move() {
        var newSnake = new Array();
        var head = snake[0].split("-");
        var y = parseInt(head[0]);//行
        var x = parseInt(head[1]);//列
        switch (direction) {
            case 'up':
                y -= 1;
                break;
            case 'down':
                y += 1;
                break;
            case 'left':
                x -= 1;
                break;
            case 'right':
                x += 1
                break;
        }
        if (x < 0 || x >= col || y < 0 || y >= row) {
            alert("Game Over");
            window.location.reload();
        }
        newSnake.push(y + "-" + x);
        var head = $("#" + newSnake[0])
        if (head.hasClass("ball")) {
            createBall();
            for (var i = 0; i < snake.length; i++) {
                newSnake.push(snake[i]);
            }
        } else {
            for (var i = 0; i < snake.length - 1; i++) {
                newSnake.push(snake[i]);
            }
        }
        if(head.hasClass("body")){
            alert("Game Over");
            window.location.reload();
        }

        snake = newSnake;
        drawSnake();
    }

    function createBall() {
        $(".ball").removeClass("ball")
        var r = random(0, row - 1);
        var c = random(0, col - 1);
        var ball = $("#" + r + "-" + c);
        if (ball.hasClass("head") || ball.hasClass("body")) {
            createBall();
            return;
        }
        ball.addClass("ball");
    }

    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
</script>
</body>
</html>